<template>
  <section>
    <el-form v-model="form" v-loading="loading" label-width="80" :rules="rule" :model="form" ref="form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" plceholder="输入名字"></el-input>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-input v-model="form.direction" plceholder="方向"></el-input>
      </el-form-item>
      <el-form-item label=" 座右铭" prop="motto">
        <el-input v-model="form.motto" plceholder="座右铭"></el-input>
      </el-form-item>
      <el-form-item label=" 联系方式" prop="address">
        <el-input v-model="form.address" plceholder="座右铭"></el-input>
      </el-form-item>
    </el-form>
    <div :span="24" style="margin-top: 20px">
      <el-button style="float: left;" @click="save()">存储</el-button>
    </div>
  </section>
</template>
<script>
import {getAbout, UpdateBasicInfo} from '../../api/api'

export default {
  data () {
    return {
      form: {
        direction: '',
        motto: '',
        name: '',
        address: '',
        _id: ''
      },
      loading: false,
      rule: {
        direction: [{required: true, message: '必须填写', trigger: 'blur'}],
        motto:
            [{required: true, message: '必须填写', trigger: 'blur'}],
        name:
            [{required: true, message: '必须填写', trigger: 'blur'}]
      }
    }
  },
  methods: {
    Init () {
      getAbout().then(
        data => {
          this.form = {
            direction: data.direction,
            motto: data.motto,
            name: data.name,
            address: '99',
            _id: data._id
          }
        }
      ).catch()
    },
    save () {
      this.loading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          UpdateBasicInfo(this.form).then(
            data => {
              this.Init()
              this.loading = false
            }
          ).catch()
        } else {
          this.$message.error('错误')
          this.loading = false
        }
      })
    }
  },
  mounted () {
    this.Init()
  }
}
</script>
